<template>
  <div>
    <!-- <el-button @click="start">开始</el-button> -->
    <ul>
      <!-- <li v-for="item in 3" :key="item" :class="{skyblue:index==3,red:index==2}" /> -->
      <li :class="{red:index==1}" />
      <li :class="{yellow:index==2}" />
      <li :class="{green:index==3}" />
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0
    }
  },
  created() {
    this.cs()
  },
  methods: {
    cs() {
      setInterval(() => {
        if (this.index === 3) {
          this.index = 0
        }
        this.index++
      }, 1000)
    },
    start() {
      // this.cs()
    }
  }
}
</script>

<style>
ul{
  display: flex;
}
li{
  list-style: none;
  height: 50px;
  line-height: 50px;
  width: 50px;
  text-align: center;
  /* background-color: pink; */
  border: 1px solid black;
  margin-right: 10px;
}
.red{
  background-color: red;
}
.yellow{
  background-color: yellow;
}
.green{
  background-color: green;
}
</style>
